<template>
  <view class="registerWrap">
	<cu-custom bgColor="bg-gradual-pink" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">注册</block>
	</cu-custom>

    <form class="registerForm">
      <view class="registerTitle">欢迎注册国家电网节电小程序</view>
      <view class="cu-form-group">
        <view class="title">联系人</view>
        <view class="registerInput">
          <image style="width: 20px; height: 20px;" mode="scaleToFill" src="@/static/icon/add.png"></image>
          <input placeholder="请输入联系人" name="input" v-model="myFormData.realname"></input>
        </view>

      </view>
      <view class="cu-form-group">
        <view class="title">电话号码</view>
        <view class="registerInput">
          <image style="width: 20px; height: 20px;" mode="scaleToFill" src="@/static/icon/add.png"></image>
          <input placeholder="请输入电话号码" name="input" v-model="myFormData.realname"></input>
        </view>
      </view>
      <view class="cu-form-group">
        <view class="title">小区名称</view>
        <view class="registerInput">
          <image style="width: 20px; height: 20px;" mode="scaleToFill" src="@/static/icon/add.png"></image>
          <input placeholder="小区名称" name="input" v-model="myFormData.username"></input>
        </view>
      </view>
      <view class="cu-form-group">
        <view class="title">楼栋号</view>
        <view class="registerInput">
          <image style="width: 20px; height: 20px;" mode="scaleToFill" src="@/static/icon/add.png"></image>
          <input placeholder="小区名称" name="input" v-model="myFormData.username"></input>
        </view>
      </view>

      <view class="padding flex flex-direction">
        <button class="cu-btn bg-blue lg"  @click="onSubmit">提交</button>
      </view>
    </form>
  </view>
</template>

<script>
import blue from "../../static/blue.png"
export default {
  data() {
    return {
      index: -1,
      switchC: true,
      imgList: [],
      uploadUrl:"/sys/common/upload",
      myFormData:{
        avatar:'',
        realname:'',
        username:'',
        sex:1,
        birthday:'',
        orgCode:'',
        workNo:'',
        phone:'',
        email:'',
        id:'',
      },
    };
  },
  onLoad: function (option) {
    console.log("this.$Route.query",this.$Route.query);
    let query=this.$Route.query
    if(query){
      this.myFormData=query;
      if(this.myFormData.sex=='女'){
        this.switchC = false
      }else if(this.myFormData.sex=='男'){
        this.switchC = true
      }
      if(this.myFormData.avatar){
        this.imgList=[this.myFormData.avatar]
      }
      if(!this.myFormData.birthday){
        this.myFormData.birthday= '无'
      }
      if(this.myFormData.identity=='普通成员'){
        this.myFormData.identity = 1
      }else if(this.myFormData.identity=='上级'){
        this.myFormData.identity = 2
      }
      if(this.myFormData.status=='正常'){
        this.myFormData.status = 1
      }else if(this.myFormData.status=='冻结'){
        this.myFormData.status = 2
      }
      this.Avatar=this.myFormData.avatar

      Object.keys(this.myFormData).map(key=>{
        if(this.myFormData[key]=='无'){
          this.myFormData[key] = ''
        }
      })
      console.log("this.myFormData",this.myFormData)
    }
  },
  methods: {
    onSubmit() {
      let myForm = this.myFormData
      let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
      let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      console.log("myForm",myForm)
      if(!myForm.phone || myForm.phone.length==0){
        this.$tip.alert('请输入手机号');
        return false
      }
      if(!checkPhone.test(myForm.phone)){
        this.$tip.alert('请输入正确的手机号');
        return false
      }
      if(!checkEmail.test(myForm.email)){
        this.$tip.alert('请输入正确的邮箱地址');
        return false
      }
      this.myFormData.id = this.$store.getters.userid
      if(this.switchC){
        this.myFormData.sex=1
      }else{
        this.myFormData.sex=2
      }
      console.log('myform',this.myFormData)
      this.$tip.loading();
      this.$http.put('/sys/user/appEdit',this.myFormData).then(res=>{
        console.log(res)
        this.$tip.loaded();
        if (res.data.success){
          this.$tip.toast('提交成功')
          this.$Router.replace({name:'userdetail'})
          /* uni.navigateTo({
            url: '/pages/user/userdetail'
          }) */
        }
      }).catch(()=>{
        this.$tip.loaded();
        this.$tip.error('提交失败')
      });
    },
    DateChange(e) {
      this.myFormData.birthday = e.detail.value
    },
    SwitchC(e) {
      this.switchC = e.detail.value
    },
    ChooseImage() {
      var that=this;
      uni.chooseImage({
        count: 4, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
            filePath: res.tempFilePaths[0],
            name: 'file'
          })
              .then(res => {
                that.myFormData.avatar=res.data.message;
              })
              .catch(err => {
                that.$tip.error(err.data.message)
              });
          this.imgList = res.tempFilePaths
        }
      });
    },
    ViewImage(e) {
      uni.previewImage({
        urls: this.imgList,
        current: e.currentTarget.dataset.url
      });
    },
    DelImg(e) {
      uni.showModal({
        title: '召唤师',
        content: '确定要删除这段回忆吗？',
        cancelText: '再看看',
        confirmText: '再见',
        success: res => {
          if (res.confirm) {
            this.imgList.splice(e.currentTarget.dataset.index, 1)
          }
        }
      })
    }
  }
}
</script>

<style>
.registerWrap{
  height:100%;
  width: 100%;
}
.registerTitle{
  font-size: 25px;
  font-weight: bold;
  color: #000000;
  padding: 0 0 0 16px;
}
.registerInput{
  display: flex;
}
.registerInput image{
  border-radius: 5px;
  margin: 0 10px 0 0;
}

.registerForm{
  height: calc(100% - 80px);
  background: white;
}
.cu-form-group{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cu-form-group .title {
  min-width: calc(4em + 15px);
  color: #c5c3c3;
}


</style>
